<!--
    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<!--
    Copyright (c) 2015, Joyent, Inc.
-->

<div class="row">
    <div class="col-md-8 col-md-offset-1">
        <div class="page-header">
            {{#if uuid}} <h4 class="modal-title">Edit Network</h4> {{else}} <h4 class="modal-title">Create Network</h4> {{/if}}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-9 col-md-offset-1">
        <form class="form-horizontal">
            <div class="alert alert-danger">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                <strong>Error!</strong> <span class="error"></span>
            </div>

            {{#if inUse}}
            <div class="alert alert-warning">
                <strong>Note!</strong> This network is in use by Virtual Machines / Servers. Changes to certain network properties is restricted.
            </div>
            {{/if}}
            <div class="form-group">
                <label class="control-label col-sm-4" for="network-name">Name</label>
                <div class="controls col-sm-7">
                    <input type="text" id="network-name" value="{{name}}"
                        class="form-control"
                        {{#if inUse}} readonly {{/if}}
                        name="name" placeholder="Name of the network">
                </div>
            </div>

            <div class="form-group owner">
                <label class="control-label col-sm-4" for="network-owners">Owners</label>
                <div class="col-sm-7">
                    {{#if owner_uuid}}
                        <input type="text"
                               value="{{owner_uuid}}"
                               name="owner_uuid"
                               class="form-control package-owner"
                               readonly />
                    {{else}}
                        {{#unless owner_uuids.length}}
                            <input type="text"
                                   class="form-control input-xl package-owner"
                                   name="owner_uuids[]"
                                   placeholder="Search by login, email or uuid">
                        {{else}}
                            {{#each owner_uuids}}
                                <input type="text"
                                       value="{{this}}"
                                       class="form-control package-owner"
                                       name="owner_uuids[]"
                                       placeholder="Search by login, email or uuid">
                            {{/each}}
                        {{/unless}}
                    {{/if}}
                </div>
                {{#ifCond 1 '!' isFabric}}
                    <div class="clearfix"></div>
                    <div class="col-sm-7 col-sm-offset-4">
                        <a class="add-owner-entry"><i class="fa fa-plus"></i> Add Another Owner</a>
                    </div>
                {{/ifCond}}
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4" for="network-gateway">Subnet</label>

                <div class="controls col-sm-7">
                    <input type="text"
                        {{#ifCond inUse '||' isNotNew}} readonly {{/ifCond}}
                        class="form-control"
                        id="netework-gateway"
                        value="{{subnet}}"
                        name="subnet" placeholder="Example: 10.12.1.0/24">
                    <div class="help-block">
                        Subnet needs to be specified in CIDR Notation
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4" for="network-gateway">Gateway</label>

                <div class="controls col-sm-7">
                    <input type="text"
                        class="form-control"
                        id="netework-gateway"
                        value="{{gateway}}"
                        {{#if inUse}} readonly {{/if}}
                        name="gateway" placeholder="Gateway Address">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4" for="network-provision-start-ip">Provision IP Range</label>

                <div class="col-sm-3" style="padding-right: 0;">
                    <input type="text" id="netework-start-ip"
                        class="form-control"
                        value="{{provision_start_ip}}"
                        name="provision_start_ip" placeholder="Start IP">
                </div>

                <div class="col-sm-3" style="padding-left: 0;">
                    <input type="text" id="netework-end-ip"
                        class="form-control"
                        value="{{provision_end_ip}}"
                        name="provision_end_ip" placeholder="End IP">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4" for="network-provision-start-ip">Routes</label>
                <div class="col-sm-8">
                    {{#if routes.length}}
                    {{#each routes}}
                    <div class="routes-controls row">
                        <div class="col-sm-5">
                            <input type="text"
                            {{#if inUse}} readonly {{/if}}
                            name="routes[{{@index}}][subnet]" value="{{subnet}}" class="form-control" placeholder="IP or Subnet">
                        </div>
                        <div class="col-sm-5">
                            <input type="text"
                            value="{{gateway}}"
                            {{#if inUse}} readonly {{/if}}
                            name="routes[{{@index}}][gateway]"
                            class="form-control" placeholder="Gateway">
                        </div>
                        <div class="col-sm-2">
                            <a class="remove-route"><i class="fa fa-trash-o"></i></a>
                        </div>
                    </div>
                    {{/each}}
                    {{else}}
                        <div class="routes-controls row">
                            <div class="col-sm-5">
                                <input type="text" name="routes[0][subnet]" class="form-control" placeholder="IP or Subnet">
                            </div>
                            <div class="col-sm-5">
                                <input type="text" name="routes[0][gateway]" class="form-control" placeholder="Gateway">
                            </div>
                        </div>
                    {{/if}}
                    <div class="row">
                        <div class="col-sm-12">
                            <a class="add-route">Add another route</a>
                        </div>
                    </div>
                </div>
            </div>

            {{#if isNotFabric}}
                <div class="form-group">
                    <label class="control-label col-sm-4" for="network-nic-tag">NIC Tag</label>

                    <div class="controls col-sm-7">
                        {{#unless inuse}}
                        <select class="form-control" name="nic_tag">
                            <option>Select a nic tag</option>
                            {{#each nic_tags}}
                            <opunlessvalue="{{name}}">{{name}}</option>
                            {{/each}}
                        </select>
                        {{#if isNotFabric}}
                            <button type="button" class="btn btn-link create-new-nic-tag">Create a New NIC Tag</button>
                        {{/if}}
                        <div class="create-nic-tag-region"></div>
                        {{else}}
                            <div class="form-control-static">{{nic_tag}}</div>
                        {{/unless}}
                    </div>
                </div>
            {{/if}}

            <div class="form-group">
                <label class="control-label col-sm-4" for="network-resolvers">DNS Resolvers</label>

                <div class="controls col-sm-7">
                    <input type="text"
                        value="{{resolvers}}"
                        id="netework-resolvers"
                        class="form-control"
                        name="resolvers"
                        placeholder="DNS Resolvers">
                    <p class="help-block">Separate each entry with a space</p>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4" for="network-vlan-id">VLAN ID</label>

                <div class="controls col-sm-5">
                    {{#ifCond isFabric '&&' vlans}}
                        <select class="form-control" name="vlan_id">
                            {{#each vlans}}
                                <option value="{{vlan_id}}">{{name}} ({{vlan_id}})</option>
                            {{/each}}
                        </select>
                    {{else}}
                        <input type="text"
                            {{#ifCond inUse '||' isFabric}} readonly {{/ifCond}}
                               value="{{vlan_id}}"
                               class="form-control"
                               id="netework-vlan-id" name="vlan_id" placeholder="VLAN ID" />
                    {{/ifCond}}

                    {{#if isFabric}}
                        <div class="checkbox">
                            <label>
                                <input class="fabric-network"
                                       {{#if isFabric}}  disabled {{/if}}
                                       checked
                                       name="fabric-network"
                                       type="checkbox" />
                                Fabric Network
                            </label>
                        </div>
                    {{/if}}
                </div>
            </div>

            {{#if isNotFabric}}
                <div class="form-group">
                    <label class="control-label col-sm-4" for="network-mtu">MTU</label>
                    <div class="controls col-sm-5">
                        <input type="text"
                               value="{{mtu}}"
                               class="form-control network-mtu"
                               name="mtu"
                               placeholder="MTU of the network" />
                    </div>
                </div>
            {{/if}}

            {{#if isFabric}}
                <div class="form-group">
                    <div class="col-sm-4"></div>
                    <div class="checkbox col-sm-7">
                        <label>
                            <input class="network-internet-nat"
                                   checked="{{internet_nat}}"
                                   name="internet_nat"
                                   type="checkbox" />
                            Provision a NAT zone on the gateway address
                        </label>
                    </div>
                </div>
            {{/if}}

            <div class="form-group">
                <label class="control-label col-sm-4" for="network-descr">Description</label>
                <div class="controls col-sm-7">
                    <input type="textarea" id="network-descr" value="{{description}}"
                        class="form-control"
                        name="description" placeholder="More details about the network">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-4 col-sm-8">
                    <button type="submit" class="btn btn-primary save">Save Network</button>
                    <button type="cancel" class="btn btn-default">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>
